<template>
	<view>

		<view class="list-box flex justify-between">
			<view class="list-box-title">
				真实姓名
			</view>
			<input type="text" v-model="realNameinfo.name" placeholder="请输入真实姓名" />
		</view>
		<view class="list-box flex justify-between">
			<view class="list-box-title">
				手机号码
			</view>
			<input type="text" v-model="realNameinfo.mobile"  placeholder="请输入手机号码" />
		</view>
		<view class="list-box flex justify-between">
			<view class="list-box-title">
				身份证号
			</view>
			<input type="text" v-model="realNameinfo.id_card" placeholder="请输入身份证号" />
		</view>
		<view class="list-s">
			<view class="list-s-title">
				本人身份证
			</view>
			<view class="list-s-tip">
				*请按照上传示例上传图片，并保持图片边框清晰
			</view>
			<view class="up-img">
				<view class="no-img" @click="choiceImg(1)">
					<image v-if="!realNameinfo.front" src="/static/image/mine/sfz-no.png" mode="" style="width:162rpx;height: 150rpx;margin-top: 100rpx;"></image>
					<image  v-if="realNameinfo.front" :src="realNameinfo.front ? realNameinfo.front : ''" mode="" style="width: 580rpx;height: 400rpx;"></image>			
					<view v-if="!realNameinfo.front" class="" style="margin-top: 20rpx;">
						请上传身份证正面
					</view>
				</view>
			</view>
			<view class="up-img fm">
				<view class="no-img" @click="choiceImg(2)">
					<image   v-show="!realNameinfo.reverse" src="/static/image/mine/sfz-no.png" mode="" style="width:162rpx;height: 150rpx;margin-top: 100rpx;"></image>
						<image  v-show="realNameinfo.reverse" :src="realNameinfo.reverse ? realNameinfo.reverse : ''" mode="" style="width: 580rpx;height: 400rpx;"></image>
					<view   v-show="!realNameinfo.reverse" class="" style="margin-top: 20rpx;">
						请上传身份证反面
					</view>
				</view>
			</view>
			<view class="btns" @click="submit">
				提交认证
			</view>
		</view>
		</view>

</template>

<script>
	export default {
		data() {
			return {
				
				realNameinfo:{			
					front: '', //身份证正面
					reverse: '', //身份证反面
					name:'',
					mobile:'',
					id_card:'',
				},
				isReal:false,
				
			}
		},
		onLoad() {
			
			this.$http.getRealNamemsg({}).then(res => {
				console.log(res)
				if (res.code == '1') {
					this.realNameinfo = res.data
					
					this.isReal = true
				}else{
					this.isReal = false
				}	
			})
		},
		methods: {
			// 提交
			submit() {
				if(!this.front) return this.$helper.toast('none', '请上传身份证正面图片')
				if(!this.reverse) return this.$helper.toast('none', '请上传身份证反面图片')			
					let params = {
						name:this.realname,
						mobile:this.mobile,
						id_card:this.id_card,
						front:this.front,
						reverse:this.reverse
					}
					this.$http.getRealNameApproval(params).then(res => {
						console.log(res)
						if (res.code == '1') {
								this.$helper.toast('none', '认证成功')
								this.$helper.tap('/pages/tabBar/mine/mine')
						}	
					})
				
				// this.$helper.to('/pages/tabBar/activity/activeSuccess/activeSuccess?title='+'提交成功'+'&leftBtn='+'查看信息');
			},
			// 选择图片操作
			choiceImg(index) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: ress => {
						this.uploadUserImg(ress.tempFilePaths[0],index);
					}
				});
			},
			uploadUserImg(blob,index) {
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
				url: this.$http.baseUrl + '64803624da6de',
					filePath: blob,
					name: 'file',
					header: {
						Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
					},
					success: res => {
						uni.hideLoading();
						if(index == 1){
							this.realNameinfo.front = JSON.parse(res.data).data.url;
						}else{
							this.realNameinfo.reverse = JSON.parse(res.data).data.url;
						}
						uni.showToast({
							title: '上传成功',
							duration: 1000
						});
					},
					fail: err => {
						uni.hideLoading();
						uni.showToast({
							title: '上传成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.list-box {
		height: 100rpx;
		border-bottom: 1rpx solid #EFEFEF;
		padding: 0 25rpx;
		align-items: center;
		margin: 0 auto;
		background-color: #fff;

		.list-box-title {
			width: 30%;
			height: 100%;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			line-height: 100rpx;
		}

		input {
			width: 70%;
			text-align: right;
			height: 100%;
		}
	}

	.list-s {
		padding: 25rpx;
		background-color: #fff;
		margin-top: 20rpx;
		font-weight: 400;

		.list-s-title {
			font-size: 30rpx;
			color: #333333;
		}

		.list-s-tip {
			font-size: 24rpx;
			color: #666666;
			margin-top: 10rpx;
		}
	}

	.up-img {
		width: 580rpx;
		height: 400rpx;
		background-image: url('/static/image/mine/sfz-z.png');
		background-size: 100%;
		background-repeat: no-repeat;
		margin: 0 auto;
		margin-top: 20rpx;
		.no-img {
			// width: 230rpx;
			// height: 200rpx;
			margin: 0 auto;
			color: #333333;
			text-align: center;
			font-size: 24rpx;

			// image {
			// 	width: 162rpx;
			// 	height: 150rpx;
			// 	margin-top: 100rpx;
			// }
		}
	}
	.fm{
		background-image: url('/static/image/mine/sfz-f.png');
	}
	.btns {
		width: 630rpx;
		height: 90rpx;
		background: rgba(51, 51, 51, 0.8);
		border-radius: 49rpx;
		text-align: center;
		margin: 0 auto;
		line-height: 90rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FEC92F;
		margin-top: 80rpx;
	}
</style>